import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet, Image, Text } from 'react-native'
import SplashScreen from 'react-native-splash-screen'
/* components */
import BasePage from '../base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import { IS_IOS, ScaleS, ScaleT, IS_IPHONEX } from 'src/utils/ScreenUtil'
// import { IOSLaunchViewNative } from 'src/bridge/index'
/* redux */
import { connect } from 'react-redux'
import {
  GET_LOCAL_USERINFO_ACTION,
  UPDATE_USERINFO_ACTION,
  DO_REQUEST_AUTH_TOKEN_ACTION
} from '../../store/actions/userinfo'
import {
  GET_LOCAL_LANDMARK_ACTION,
  GET_HOME_CITY_ACTION,
  GET_LANUCH_CURRENT_LOCATION_ACTION
} from 'src/store/actions/landmark'

const mapActiontoProps = dispatch => ({
  updateUserinfoState (payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  },
  getLocalUserinfo () {
    const promise = GET_LOCAL_USERINFO_ACTION()
    dispatch(promise)
    return promise.payload
  },
  getLocalLandmark () {
    const promise = GET_LOCAL_LANDMARK_ACTION()
    dispatch(promise)
    return promise.payload
  },
  getHomeCity () {
    const promise = GET_HOME_CITY_ACTION()
    dispatch(promise)
    return promise.payload
  },
  getLanuchCUrrentLocation () {
    const promise = GET_LANUCH_CURRENT_LOCATION_ACTION()
    dispatch(promise)
    return promise.payload
  },
  doRequestAuthToken (payload) {
    const promise = DO_REQUEST_AUTH_TOKEN_ACTION(payload)
    dispatch(promise)
    return promise.payload
  }
})
@connect(
  ({ userinfo }) => ({}),
  mapActiontoProps
)
class LaunchPage extends BasePage {
  static propTypes = {
    navigation: PropTypes.object,
    role: PropTypes.string,
    getLocalRoletype: PropTypes.func,
    updateUserinfoState: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
      header: null,
      switchRoleModalVisible: false
    }
  }

  SplashScreenHide = false

  componentDidMount () {
    const {
      getLocalUserinfo,
      getLocalLandmark, // 磁盘城市信息
      getHomeCity, // 城市
      getLanuchCUrrentLocation, // gps
      navigation
    } = this.props
    Promise.all([getLocalUserinfo(), getLocalLandmark()]).then(
      ([{ role }, { cityName }]) => {
        console.log('getLocalUserinfo()', role, cityName)
        if (!cityName) {
          getHomeCity().then(res => {
            console.log('getCurrentLocation', res)
          })
        } else {
          getLanuchCUrrentLocation().then(res => {
            console.log('getLanuchCUrrentLocation', res)
          })
        }
        if (!role) {
          this.setState({
            switchRoleModalVisible: true
          })
        } else {
          navigation.navigate(`${role}MainNavigator`)
        }
      }
    ).finally(() => {
      console.log('finally, SplashScreen.hide()')
      SplashScreen.hide()
    })
  }

  onChooseC = () => {
    // 选择C
    this.props.updateUserinfoState({ role: 'C' })
    this.onGoAhead('C')
  }

  onChooseB = () => {
    // 选择C
    this.props.updateUserinfoState({ role: 'B' })
    this.onGoAhead('B')
  }

  onGoAhead = role => {
    this.props.navigation.navigate(`${role}MainNavigator`)
  }

  childRender () {
    const { switchRoleModalVisible } = this.state
    if (!switchRoleModalVisible) {
      return null
    }
    return (
      <View style={styles.container}>
        <View style={styles.changeRole}>
          <View style={styles.changeRoleTitle}>
            <Text style={styles.changeRoleTitleTop}>选择身份</Text>
            <Text style={styles.changeRoleTitleBot}>Select Identity</Text>
          </View>
          <View style={styles.bottom}>
            <View style={styles.topImg}>
              <Image
                style={styles.logo}
                source={require('@/imgC/login/login-icon.png')}
              />
            </View>
            <CustomButton style={styles.roleCard} onPress={this.onChooseC}>
              <Image
                style={styles.roleImg}
                source={require('@/imgC/login/male-checked.png')}
              />
              <Text style={styles.roleText}>我是学生，要求职</Text>
              <Image
                style={styles.roleArrow}
                source={require('@/imgC/login/system-backnew.png')}
              />
            </CustomButton>
            <CustomButton style={[styles.roleCard, styles.roleB]} onPress={this.onChooseB}>
              <Image
                style={styles.roleImg}
                source={require('@/imgC/login/female-checked.png')}
              />
              <Text style={[styles.roleText, styles.roleTextB]}>我是企业，要招聘</Text>
              <Image
                style={styles.roleArrow}
                source={require('@/imgC/login/system-back.png')}
              />
            </CustomButton>
          </View>
        </View>
      </View>
    )
  }
}

export default LaunchPage

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  image_bg: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%'
  },
  box_bg: {
    backgroundColor: 'rgba(0, 0, 0, 0.305)'
  },
  box: {
    position: 'absolute',
    bottom: 15,
    left: 15,
    right: 15,
    height: 216,
    backgroundColor: 'rgba(255,255,255,1)',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.1)',
    shadowOffset: { width: 0, height: 1 },
    shadowRadius: 15,
    alignItems: 'center'
  },
  line: {
    marginTop: 10,
    width: 45,
    height: 5,
    backgroundColor: 'rgba(216,216,216,1)',
    borderRadius: 3
  },
  button_bg: {
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 61
  },
  button: {
    flexDirection: 'column-reverse',
    alignItems: 'center'
  },
  title: {
    fontSize: 18,
    color: 'rgba(0,0,0,1)',
    fontWeight: '500'
  },
  changeRole: {
    flex: 1,
    marginTop: ScaleS(100)
  },
  changeRoleTitle: {
    flexDirection: 'column',
    paddingLeft: ScaleS(30)
  },
  changeRoleTitleTop: {
    fontSize: ScaleT(27),
    fontWeight: '900',
    color: 'rgba(60,60,60,1)',
    marginBottom: ScaleS(13)
  },
  changeRoleTitleBot: {
    fontSize: ScaleT(12),
    fontWeight: '600',
    color: 'rgba(68,68,68,1)'
  },
  bottom: {
    width: '100%',
    position: 'absolute',
    bottom: 0,
    flexDirection: 'column'
  },
  topImg: {
    width: '100%',
    flex: 1,
    justifyContent: 'flex-end'
  },
  logo: {
    alignSelf: 'flex-end',
    marginRight: ScaleS(25)
  },
  roleCard: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: ScaleS(30),
    paddingVertical: ScaleS(35),
    backgroundColor: '#FFE400'
  },
  roleB: {
    backgroundColor: '#3C3C3C',
    paddingBottom: IS_IPHONEX ? ScaleS(55) : ScaleS(35)
  },
  roleImg: {
    width: ScaleS(38),
    height: ScaleS(38),
    // borderRadius: ScaleS(19),
    marginRight: ScaleS(23)
  },
  roleText: {
    flex: 1,
    fontSize: ScaleS(16),
    fontWeight: '600',
    color: 'rgba(68,68,68,1)'
  },
  roleTextB: {
    color: '#FFFFFF'
  },
  roleArrow: {
    width: ScaleS(6),
    height: ScaleS(10)
  }
})
